'use client';

import { useState } from 'react';
import { 
  School,
  Building,
  Users,
  BookOpen,
  Medal,
  Edit,
  Image as ImageIcon,
  Save,
  X
} from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { FadeIn } from '@/components/ui/motion';
import { useToast } from '@/components/ui/use-toast';
import { Toaster } from 'sonner';
import { useAuth } from '@/hooks/use-auth';
import { UserRole } from '@/types';

// 模拟数据
const mockSchoolInfo = {
  name: '阳光实验小学',
  englishName: 'Sunshine Experimental Primary School',
  established: '1995',
  motto: '德智体美劳全面发展',
  address: '广东省广州市天河区阳光路123号',
  contact: '020-12345678',
  email: 'contact@sunshine.edu.cn',
  introduction: `阳光实验小学创建于1995年，是一所现代化的义务教育阶段学校。学校秉承"以人为本，全面发展"的教育理念，致力于培养德智体美劳全面发展的新时代小学生。

近年来，学校在教育教学、课程改革、特色发展等方面取得显著成绩，多次获得市级示范学校称号。学校拥有一支高素质的教师队伍，配备现代化的教学设施，为学生提供优质的教育环境。`,
  facilities: [
    {
      name: '教学楼',
      description: '配备多媒体教室、智慧黑板等现代化教学设备'
    },
    {
      name: '图书馆',
      description: '藏书5万余册，电子阅览室配备50台电脑'
    },
    {
      name: '运动场',
      description: '标准400米跑道，设有足球场、篮球场、排球场等'
    },
    {
      name: '科技楼',
      description: '设有科学实验室、创客空间、机器人教室等'
    },
    {
      name: '艺术中心',
      description: '音乐教室、舞蹈室、美术室一应俱全'
    }
  ],
  departments: [
    {
      name: '教导处',
      description: '负责教学管理、教研活动、课程安排等'
    },
    {
      name: '德育处',
      description: '负责学生思想品德教育、行为规范培养等'
    },
    {
      name: '总务处',
      description: '负责学校后勤保障、设施维护等'
    },
    {
      name: '教研室',
      description: '负责教学研究、教师培训、课程开发等'
    }
  ],
  achievements: [
    '市级示范性学校',
    '省级文明校园',
    '全国艺术教育特色学校',
    '省级科技创新教育基地',
    '市级体育传统项目学校'
  ],
  images: [
    'https://images.unsplash.com/photo-1580582932707-520aed937b7b?q=80&w=1632&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?q=80&w=1470&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1497633762265-9d179a990aa6?q=80&w=1473&auto=format&fit=crop',
    'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?q=80&w=1422&auto=format&fit=crop'
  ]
};

export default function SchoolInfoPage() {
  const { toast } = useToast();
  const { user } = useAuth();
  const isAdmin = user?.role === UserRole.ADMIN;
  
  const [isEditing, setIsEditing] = useState(false);
  const [schoolInfo, setSchoolInfo] = useState(mockSchoolInfo);
  const [editedInfo, setEditedInfo] = useState(mockSchoolInfo);
  
  // 处理信息更新
  const handleSave = () => {
    setSchoolInfo(editedInfo);
    setIsEditing(false);
    toast({
      title: "保存成功",
      description: "学校信息已更新",
    });
  };
  
  // 处理编辑取消
  const handleCancel = () => {
    setEditedInfo(schoolInfo);
    setIsEditing(false);
  };
  
  // 处理输入变化
  const handleChange = (field: string, value: string) => {
    setEditedInfo(prev => ({
      ...prev,
      [field]: value
    }));
  };

  return (
    <FadeIn>
      <Toaster />
      <div className="container mx-auto py-6">
        <div className="flex justify-between items-center mb-6">
          <div>
            <h1 className="text-2xl font-bold">学校信息</h1>
            <p className="text-muted-foreground">
              查看和管理学校基本信息
            </p>
          </div>
          {isAdmin && (
            <div>
              {isEditing ? (
                <div className="flex space-x-2">
                  <Button variant="outline" onClick={handleCancel}>
                    <X className="h-4 w-4 mr-1" />
                    取消
                  </Button>
                  <Button onClick={handleSave}>
                    <Save className="h-4 w-4 mr-1" />
                    保存
                  </Button>
                </div>
              ) : (
                <Button onClick={() => setIsEditing(true)}>
                  <Edit className="h-4 w-4 mr-1" />
                  编辑信息
                </Button>
              )}
            </div>
          )}
        </div>
        
        <div className="grid gap-6">
          {/* 基本信息 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <School className="h-5 w-5" />
                基本信息
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <Label>学校名称</Label>
                  {isEditing ? (
                    <Input
                      value={editedInfo.name}
                      onChange={(e) => handleChange('name', e.target.value)}
                      className="mt-1"
                    />
                  ) : (
                    <div className="mt-1">{schoolInfo.name}</div>
                  )}
                </div>
                <div>
                  <Label>英文名称</Label>
                  {isEditing ? (
                    <Input
                      value={editedInfo.englishName}
                      onChange={(e) => handleChange('englishName', e.target.value)}
                      className="mt-1"
                    />
                  ) : (
                    <div className="mt-1">{schoolInfo.englishName}</div>
                  )}
                </div>
                <div>
                  <Label>建校时间</Label>
                  {isEditing ? (
                    <Input
                      value={editedInfo.established}
                      onChange={(e) => handleChange('established', e.target.value)}
                      className="mt-1"
                    />
                  ) : (
                    <div className="mt-1">{schoolInfo.established}</div>
                  )}
                </div>
                <div>
                  <Label>校训</Label>
                  {isEditing ? (
                    <Input
                      value={editedInfo.motto}
                      onChange={(e) => handleChange('motto', e.target.value)}
                      className="mt-1"
                    />
                  ) : (
                    <div className="mt-1">{schoolInfo.motto}</div>
                  )}
                </div>
                <div>
                  <Label>地址</Label>
                  {isEditing ? (
                    <Input
                      value={editedInfo.address}
                      onChange={(e) => handleChange('address', e.target.value)}
                      className="mt-1"
                    />
                  ) : (
                    <div className="mt-1">{schoolInfo.address}</div>
                  )}
                </div>
                <div>
                  <Label>联系电话</Label>
                  {isEditing ? (
                    <Input
                      value={editedInfo.contact}
                      onChange={(e) => handleChange('contact', e.target.value)}
                      className="mt-1"
                    />
                  ) : (
                    <div className="mt-1">{schoolInfo.contact}</div>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
          
          {/* 学校简介 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <BookOpen className="h-5 w-5" />
                学校简介
              </CardTitle>
            </CardHeader>
            <CardContent>
              {isEditing ? (
                <Textarea
                  value={editedInfo.introduction}
                  onChange={(e) => handleChange('introduction', e.target.value)}
                  className="min-h-[200px]"
                />
              ) : (
                <div className="whitespace-pre-line">{schoolInfo.introduction}</div>
              )}
            </CardContent>
          </Card>
          
          {/* 校园风光 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <ImageIcon className="h-5 w-5" />
                校园风光
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {schoolInfo.images.map((image, index) => (
                  <div key={index} className="aspect-video rounded-lg overflow-hidden">
                    <img
                      src={image}
                      alt={`校园风光 ${index + 1}`}
                      className="w-full h-full object-cover"
                    />
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
          
          {/* 机构设置 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Building className="h-5 w-5" />
                机构设置
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 gap-4">
                {schoolInfo.departments.map((dept, index) => (
                  <div key={index} className="bg-muted p-4 rounded-lg">
                    <h3 className="font-medium mb-2">{dept.name}</h3>
                    <p className="text-sm text-muted-foreground">{dept.description}</p>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
          
          {/* 设施配备 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Building className="h-5 w-5" />
                设施配备
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                {schoolInfo.facilities.map((facility, index) => (
                  <div key={index} className="bg-muted p-4 rounded-lg">
                    <h3 className="font-medium mb-2">{facility.name}</h3>
                    <p className="text-sm text-muted-foreground">{facility.description}</p>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
          
          {/* 荣誉成就 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Medal className="h-5 w-5" />
                荣誉成就
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                {schoolInfo.achievements.map((achievement, index) => (
                  <div key={index} className="bg-primary/10 p-4 rounded-lg">
                    <div className="flex items-center gap-2">
                      <Medal className="h-4 w-4 text-primary" />
                      <span>{achievement}</span>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </FadeIn>
  );
}
